//清除浮动
.clearfix() {
  &:after{
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    *zoom:1;
  }
}

//##
//# .fl 左浮动
//# .fr 右浮动
//##
.fl(){
  float:left;
}
.fr(){
  float:right;
}

//##
//# .tac 文本居中
//# .tar 文本居右
//# .tal 文本居左
//##
.tac(){
  text-align: center;
}
.tar(){
  text-align: right;
}
.tal(){
  text-align: left;
}

//文本溢出隐藏并显示省略号
.elps(){text-overflow:ellipsis;white-space:nowrap;overflow:hidden; display: block;}
//让低版本ie支持inline-block
.inBk(){ display:inline-block; *display:inline; *zoom:1;}
//让文本换行
.bw(){word-wrap:break-word;word-break:break-all;}


//垂直居中
.vam(){
  vertical-align: middle;
}
//溢出隐藏
.oh(){
  overflow: hidden;
}
//完全消失
.dn(){
  display: none;
}

//##
//# .fs12 字体大小12像素
//# .fs14 字体大小14像素
//# .fs16 字体大小16像素
//# .fs18 字体大小18像素
//##
.fs12(){
  font-size: 12px;
}
.fs14(){
  font-size: 14px;
}
.fs16(){
  font-size: 16px;
}
.fs18(){
  font-size: 18px;
}
.fs24(){
  font-size: 24px;
}
//字体粗
.fwb(){
  font-weight: 700;
}
//字体细
.fwn(){
  font-weight: 400;
}


//雅黑
.font-yh(){
    font-family:\5fae\8f6f\96c5\9ed1;
    font-weight: 400;
}
//宋体
.font-st(){
    font-family:\5b8b\4f53;
}
//黑体
.font-ht(){
    font-family:\9ed1\4f53;
}


//## .border-radius(@tl,@tr,@br,@bl)  圆角
//#  @tl 左上
//#  @tr 右上
//#  @br 右下
//#  @bl 左下
//##
.border-radius(@tl,@tr,@br,@bl){
    -moz-border-radius: @tl @tr @br @bl;      //Gecko browsers
    -webkit-border-radius: @tl @tr @br @bl;   // Webkit browsers
    -o-border-radius: @tl @tr @br @bl;  
    border-radius: @tl @tr @br @bl;            // W3C syntax
}


//##  @opacity 透明度参数
//#   取值范围 0-100
//#   值越小透明度越高
//##

.opacity(@opacity) {
  opacity: @opacity / 100;//其他
  filter:alpha(opacity=@opacity);// IE滤镜
  -moz-opacity:@opacity / 100;// Firefox私有
}

//## .shadow(0px,1px,3px,#CCCCCC);阴影
//#    @h 水平
//#    @v 垂直
//#    @blur 模糊距离
//#  @color 阴影色值
//##
.shadow(@h,@v,@blur,@color){
    -moz-box-shadow: @h @v @blur @color;
    -webkit-box-shadow: @h @v @blur @color;
    box-shadow: @h @v @blur @color;
}

//## CSS三角形
//#   @width 三角形大小
//#   @height 三角形高度
//#   @color 三角形颜色
//# .triangle-t 三角形向上
//# .triangle-r 三角形向右
//# .triangle-d 三角形向下
//# .triangle-l 三角形向左
//# .triangle-tl 三角形向左上
//# .triangle-bl 三角形向左下
//# .triangle-tr 三角形向右上
//# .triangle-br 三角形向右下
//##
.triangle-cont(){
    font-size: 0;
    height: 0;  
    overflow: hidden; 
    width: 0;
  *display:inline; *zoom:1;
}
.triangle-t(@width,@color){
    .triangle-cont();
    border-width: @width;  
    border-style: dashed dashed solid dashed ;
    border-color: transparent transparent @color transparent;
}
.triangle-r(@width,@color){
    .triangle-cont();
    border-width: @width;  
    border-style: dashed dashed dashed solid ;
    border-color: transparent transparent transparent @color;
}
.triangle-d(@width,@color){
    .triangle-cont();
    border-width: @width;  
    border-style: solid dashed dashed dashed ;
    border-color:@color transparent transparent transparent;
}
.triangle-l(@width,@color){
    .triangle-cont();
    border-width: @width;  
    border-style: dashed solid dashed dashed ;
    border-color: transparent @color transparent transparent;
}

.triangle-tl(@width,@height,@color){
  .triangle-cont();
  border-color: @color transparent transparent @color;
  border-style: solid dashed dashed solid;
  border-width: @height @width @height @width;
}

.triangle-bl(@width,@height,@color){
  .triangle-cont();
  border-color: transparent transparent @color @color;
  border-style: dashed dashed solid solid;
  border-width: @height @width @height @width;;
}
.triangle-br(@width,@height,@color){
  .triangle-cont();
  border-color: transparent @color @color transparent;
  border-style: dashed solid solid dashed;
  border-width: @height @width @height @width;;
}







